<template>
  <div>
    <el-table
      :data="tableData"
      class="table"
      row-class-name="table-row"
      cell-class-name="table-cell"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <div class="table-list">
            <div
              v-for="item in props.row.times"
              :key="item.time"
              class="table-item"
            >
              <div class="item-el-one">{{ item.time }}</div>
              <div class="item-el-two">{{ item.status }}</div>
              <div class="item-el-three">{{ item.name }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="日期"
        prop="date"
        :resizable="false"
        width="300"
      ></el-table-column>
      <el-table-column
        label="预定时间"
        prop="time"
        :resizable="false"
        width="300"
      ></el-table-column>
      <el-table-column
        label="状态"
        prop="status"
        :resizable="false"
        width="300"
      ></el-table-column>
      <el-table-column
        label="预定人"
        prop="name"
        :resizable="false"
        min-width="120"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "screeningAdvanced",
  data() {
    return {
      tableData: [
        {
          id: "12987122",
          name: "好滋好味",
          date: "2021-1-01",
          time: "09:00-10:30",
          status: "已预订",
          times: [
            { name: "好滋", time: "09:00-10:30", status: "已预订" },
            { name: "好味", time: "11:00-12:30", status: "待审核" },
          ],
        },
        {
          id: "12987122",
          name: "鸡蛋仔",
          date: "2021-1-02",
          time: "09:00-10:30",
          status: "待审核",
          times: [
            { name: "请问", time: "09:00-10:30", status: "已预订" },
            { name: "维尔", time: "11:00-12:30", status: "已预订" },
          ],
        },
      ],

      height: 0,
      columns: [],
    };
  },
  mounted() {
    this.height = 500; // 动态设置高度
    // 异步设置数据，这样解决初次进来不卡，由于加载数据很大啦，你没必要这样做哦
    setTimeout(() => {
      let col = ["name", "sex", "describe"];
      this.columns = Array.from({ length: 4 }, (_, idx) => ({
        prop: idx > 2 ? col[2] : col[idx],
        id: idx,
        label: idx > 2 ? col[2] : col[idx],
        fixed: idx < 1 ? "" : "",
        width: this.rnd(50, 300),
        sortable: false,
        resizable: true,
      }));
      const data = Array.from({ length: 100 }, (_, idx) => ({
        id: idx + 1,
        name: 1 + idx,
        sex: idx,
        num: 1 + idx,
        describe: "欢迎使用plx" + idx,
      }));
      this.datas = data; // 知道为啥datas不在 data()方法里面定义吗？嘻嘻
      this.$refs.plxTable.reloadData(this.datas);
    });
  },
  methods: {
    rnd(n, m) {
      var random = Math.floor(Math.random() * (m - n + 1) + n);
      return random;
    },
    filternumMethod({ value, row, column }) {
      return parseInt(row.num) > value;
    },
    filternumEvent() {
      const column = this.$refs.plxTable.getColumnByField("num");
      // 修改第二个选项为勾选状态
      const option = column.filters[1];
      option.checked = true;
      // 修改条件之后，需要手动调用 updateData 处理表格数据
      this.$refs.plxTable.updateData();
    },
    // 更改 num 的筛选条件
    updatenumFilterEvent() {
      // 这是我根据 num 的field字段去找出列，你也可以直接获取列，然后找出你要修改的列，
      // 反正setFilter方法接受一个列，加上要修改的筛选值数组
      const column = this.$refs.plxTable.getColumnByField("num");
      // 修改筛选列表，并默认设置为选中状态
      this.$refs.plxTable.setFilter(column, [
        { label: "大于15", value: 15 },
        { label: "大于30", value: 30, checked: true },
        { label: "大于40", value: 40 },
      ]);
      // 修改条件之后，需要手动调用 updateData 处理表格数据
      this.$refs.plxTable.updateData();
    },
  },
};
</script>

<style lang="scss" scoped>
.table {
  &::before {
    display: none;
  }
  border: 0;
  ::v-deep .el-table__expand-column {
    border-right: 0;
  }
  ::v-deep .el-table th.is-leaf {
    border: 0;
  }
  ::v-deep .el-table__body tr:hover > td {
    background-color: #fff;
  }
  ::v-deep .table-cell {
    border: 0;
  }
  ::v-deep .table-row {
    border-top: 1px solid #efefef;
    &:first-child {
      border: 0;
    }
  }
  ::v-deep table {
    border-collapse: collapse;
  }
  .table-list {
    .table-item {
      display: flex;
      margin: 23px 0;
      &:first-child {
        margin: 0;
      }
      &:last-child {
        margin-bottom: 10px;
      }
    }
    .item-el-one {
      width: 100px;
      margin-left: 368px;
    }
    .item-el-two {
      width: 100px;
      margin-left: 200px;
    }
    .item-el-three {
      width: 100px;
      margin-left: 200px;
    }
  }
}
</style>
